<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <link th:replace="layout :: head"/>
    <style>
        .label-title {
            width: 160px !important;
        }
    </style>
</head>

<body>
<div class="layui-fluid">
    <form id="queryForm" class="layui-form">
        <div class="layui-card">
            <div class="layui-card-header">
                <span>用户列表</span>
            </div>
            <div class="layui-card-body layui-row layui-col-space10">

                <div class="layui-col-md4">
                    <div class="form-title">用户ID</div>
                    <div class="form-input">
                        <input type="text" name="userId" maxlength="300" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="form-title">创建时间</div>
                    <div class="form-input">
                        <input type="text" id="createdDate" readonly="readonly" autocomplete="off" class="layui-input">
                        <input type="hidden" id="begin" name="begin"/>
                        <input type="hidden" id="end" name="end"/>
                    </div>
                </div>

                <div class="layui-col-md4">
                    <div class="form-title">最近登录时间</div>
                    <div class="form-input">
                        <input type="text" id="loginDate" readonly="readonly" autocomplete="off" class="layui-input">
                        <input type="hidden" id="loginBegin" name="loginBegin" th:value="${loginBegin}"/>
                        <input type="hidden" id="loginEnd" name="loginEnd" th:value="${loginEnd}"/>
                    </div>
                </div>

                <div class="layui-col-md4">
                    <div class="form-title">是否在线</div>
                    <div class="form-input">
                        <select name="online">
                            <option value="">全部</option>
                            <option value="true">是</option>
                            <option value="false">否</option>
                        </select>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="form-title"></div>
                    <div class="form-input">
                        <button type="button" class="layui-btn layui-btn-sm" lay-filter="query" id="query">搜索</button>
                        <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary">重置</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<div class="layui-col-md12">
    <div class="layui-card">
        <div class="layui-card-body">
            <div th:replace="layout :: totalWithId(total)"></div>

            <table class="layui-table" lay-filter="listTable">
                <thead>
                <tr>
                    <th lay-data="{field:'uid',width:300}">用户id</th>
                    <th lay-data="{field:'online', templet: '#onlineTpl' }">是否在线</th>
                    <th lay-data="{field:'createdDate'}">创建时间</th>
                    <th lay-data="{field:'loginDate'}">最近登录时间</th>
                    <th lay-data="{fixed: 'right',  align: 'center', toolbar: '#operationTpl'}">操作</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

<!--模态框-->
<div class="model showme-hidden" id="detailModel">
    <form class="layui-form layui-form-pane" id="detailForm" lay-filter="detailForm">

        <div class="layui-card-header">基本信息</div>

        <div class="layui-form-item">
            <div class="layui-col-md6">
                <label class="layui-form-label label-title ">创建时间：</label>
                <div class="layui-input-block" name="createdDate"></div>
            </div>
            <div class="layui-col-md6">
                <label class="layui-form-label label-title ">用户ID：</label>
                <div class="layui-input-block" name="uid"></div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-col-md6">
                <label class="layui-form-label label-title  ">是否在线：</label>
                <div class="layui-input-block" name="online"></div>
            </div>
            <div class="layui-col-md6">
                <label class="layui-form-label label-title">最近登录时间：</label>
                <div class="layui-input-block" name="loginDate"></div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-col-md6">
                <label class="layui-form-label label-title">登录设备类型：</label>
                <div class="layui-input-block" name="terminal"></div>
            </div>
            <div class="layui-col-md6">
                <label class="layui-form-label label-title">SDK版本号：</label>
                <div class="layui-input-block" name="version"></div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-col-md6">
                <label class="layui-form-label label-title">最近登录IP：</label>
                <div class="layui-input-block" name="loginIp"></div>
            </div>
            <div class="layui-col-md6">
                <label class="layui-form-label label-title">登录token：</label>
                <div class="layui-input-block" name="token"></div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-col-md6">
                <label class="layui-form-label label-title">设备类型：</label>
                <div class="layui-input-block" name="deviceTerminal"></div>
            </div>
            <div class="layui-col-md6">
                <label class="layui-form-label label-title">操作系统：</label>
                <div class="layui-input-block" name="os"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-col-md6">
                <label class="layui-form-label label-title">设备品牌：</label>
                <div class="layui-input-block" name="brand"></div>
            </div>
            <div class="layui-col-md6">
                <label class="layui-form-label label-title">手机型号：</label>
                <div class="layui-input-block" name="model"></div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-col-md6">
                <label class="layui-form-label label-title">宿主应用版本：</label>
                <div class="layui-input-block" name="appVersion"></div>
            </div>
        </div>

        <div class="layui-form-item" style="height: 10px">
        </div>

        <div class="layui-card-header">登录归属信息</div>

        <div class="layui-form-item">
            <div class="layui-col-md6">
                <label class="layui-form-label label-title">节点名称：</label>
                <div class="layui-input-block" name="zoneName"></div>
            </div>
            <div class="layui-col-md6">
                <label class="layui-form-label label-title">节点IP：</label>
                <div class="layui-input-block" name="zoneIp"></div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-col-md6">
                <label class="layui-form-label label-title">节点端口：</label>
                <div class="layui-input-block" name="zonePort"></div>
            </div>
        </div>

    </form>
</div>

<script type="text/html" id="operationTpl">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">详细</a>
</script>
<script th:replace="layout :: script"></script>
<script th:src="@{/js/user/userList.js}" type="text/javascript"></script>

<!--是否在线-->
<script type="text/html" id="onlineTpl">
    {{#  if(d.online === true){ }}
    <span>是</span>
    {{#  }else{ }}
    <span>否</span>
    {{#  }  }}
</script>

</body>
</html>
